<template>
  <div class="project-detail-home" v-if="activeName === 'projects-index'">
    <el-row :type="'flex'" :gutter="15">
      <el-col :span="16">
        <el-card class="h-100p">
          <div class="pad-b-15">
            <h4 class="dis-ib mar-0">
              <span class="dis-ib bg-primary lh-30 text-center mar-r-5 br-5" style="width: 30px;">
                <i class="ansiconfont el-icon-tickets"></i>
              </span>
              {{projectInfo.name}}
            </h4>
            <div class="pull-right text-black-3 lh-30">
              <span class="mar-r-5">{{projectInfo.createTime | formatDate}}</span> 
              <span class="text-black-1 ftw-b">{{projectInfo.userName}}</span>
              创建
            </div>
          </div>
          <div class="mar-l-38 fts-14">
            <div>
              <span class="mar-r-30">负责单位：医疗保障局(假数据)</span>
              <span class="mar-r-30">负责人：王佳(假数据)</span>
              <span class="mar-r-30 text-black-3"><span class="mar-r-20">长期</span>{{projectInfo.createTime | formatDate('YYYY-MM-DD')}} 至永久 (假数据)</span>
            </div>
            <div class="mar-t-15 text-black-3">
              描述：{{projectInfo.description || '没有项目描述...'}}
            </div>
            <div class="mar-t-15 lh-40">
              <span class="state-round state-round-running"></span><span>运行中</span>
            </div>
            <div class="mar-t-15 text-black-3 fts-12">
              数据量 <span class="text-black-1 mar-l-20 mar-r-30">共12亿条</span>
              数据库 <span class="text-black-1 mar-l-20 mar-r-30">共1个</span>
              表 <span class="text-black-1 mar-l-20 mar-r-30">共1个</span>
              任务 <span class="text-black-1 mar-l-20 mar-r-30">共1个</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="h-100p">
          <el-row :gutter="10">
            <el-col v-for="item of menus" :key="item.code" :span="8">
              <el-card @click.native="menuItemClick(item)" shadow="hover" :body-style="{'padding': '10px' , 'border': 'none'}" class="menu-item-card text-center bor-0 cur-p">
                <div class="lh-40">
                  <i class="fts-38 text-color" :style="{
                    'color': item.color
                  }" :class="item.icon"></i>
                </div>
                <p class="mar-0 lh-30">{{item.name}}</p>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="15">
      <el-col :span="8">
        <el-card header="数据类型占比分析">
          <div class="w-100p h-200">
            <rs-echarts :option="pieOption1"></rs-echarts>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card header="目录共享占比分析">
          <div class="w-100p h-200">
            <rs-echarts :option="pieOption2"></rs-echarts>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card header="任务分析">
          <div class="w-100p h-200">
            <rs-echarts :option="pieOption3"></rs-echarts>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="24">
        <el-card header="资源目录排名">
          <el-table :data="table1Data">
            <el-table-column
              label="排名"
              type="index"
              width="80px"
              header-align="right"
            >
            <template slot-scope="scope">
              <div class="text-right mar-r-15">
                <i v-if="scope.$index < 3" class="portal-icon_huangguan" :class="{
                  'text-sort-1': scope.$index == 0,
                  'text-sort-2': scope.$index == 1,
                  'text-sort-3': scope.$index == 2
                  }"></i>
                <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
              </div>
            </template>
            </el-table-column>
            <el-table-column
              v-for="item of table1Option.column"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-card header="质量报告统计">
          <el-table :data="table1Data">
            <el-table-column
              label="排名"
              type="index"
              width="80px"
              header-align="right"
            >
            <template slot-scope="scope">
              <div class="text-right mar-r-15">
                <i v-if="scope.$index < 3" class="portal-icon_huangguan" :class="{
                  'text-sort-1': scope.$index == 0,
                  'text-sort-2': scope.$index == 1,
                  'text-sort-3': scope.$index == 2
                  }"></i>
                <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
              </div>
            </template>
            </el-table-column>
            <el-table-column
              v-for="item of table1Option.column"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- <el-row>
      <el-col :span="24">
        <project-index></project-index>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <definition-list></definition-list>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <instance-list></instance-list>
      </el-col>
    </el-row> -->
  </div>
  <div v-else class="h-100p">
    <el-card :body-style="{
      'padding': '0',
      'height': '100%',
      'border-radius': '0'
    }" class="h-100p">
      <router-view class="h-100p"/>
    </el-card>
  </div>
</template>
<script>

import definitionList from './pages/definition/pages/list';
import projectIndex from './pages/index';
import instanceList from './pages/instance/pages/list';
import color from '@/util/color';
import { formatDate } from '@/filters/index'

import { pieOption , getDataCollectCountStr , createTestData , getPre} from './chart-option';

import { getStatisticsCatalogShareTypeRatio } from '@/api/resourceCatalog/classification';

const baseTableOption = {
  height: 'auto',
  calcHeight: 30,
  tip: false,
  searchShow: true,
  searchMenuSpan: 6,
  border: false,
  editBtn: false,
  addBtn: false,
  menuWidth: 350,
  dialogClickModal: false
}

const createTableHander = (names) => {
  let headers = [];
  names.forEach(
    (name , index) => {
      let item = name.split('|');
      headers.push({
        label: item[0],
        prop: `fieldKey_${index}`,
        dType: item[1] || 'string',
        max: item[2] || null,
        min: item[3] || null,
        width: item[1] === 'time' ? '180px' : null
      })
    }
  );
  return headers;
}

const createData = (headers) => {
  let data = [];
  for(let i = 0; i < 10; i++){
    let item = {};
    headers.forEach(
      (header , index) => {
        if(header.dType === 'sort'){
          item[header.prop] = (i + 1);
        }
        if(header.dType === 'time'){
          item[header.prop] = formatDate(Date.now() , 'YYYY-MM-DD HH:mm:ss');
        }
        if(header.dType === 'string'){
          item[header.prop] = '假数据' + (index + 1);
        }
        if(header.dType === 'number'){
          item[header.prop] = Math.ceil(Math.random() * 100000)
        }
      }
    )
    data.push(item);
  }
  return data;
}


export default {
  components: {
    definitionList,
    projectIndex,
    instanceList
  },
  name: 'projects-detail',
  inject: ['indexMain'],
  data () {
    return {
      imagePrefix: '/assets/images/icon/ds/',
      menus: [],
      activeName: '',
      projectInfo: {
        name: '',
        createTime: '',
        userName: '',
        description: ''
      },
      firstAvailMenu: null,
      pieOption1: null,
      pieOption2: null,
      pieOption3: null,
      color: color,

      table1Loading: false,
      table1Data: [],
      table1Option: {
        ...baseTableOption,
        column: createTableHander(['目录名称' , '数据量(条)|number|100000|1' , '主题' , '行业' , '共享类型' , '更新频率' , '创建人' , '创建时间|time'])
      }
    }
  },
  watch: {
    '$route': function(){
      this.activeName = this.$router.currentRoute.name;
      if(this.activeName === 'projects-index'){
        this.$breadcrumb.remove(3 , true);
      }
    }
  },
  created(){
    this.indexMain.showMenus = false;
    this.activeName = this.$router.currentRoute.name,
    this.projectInfo = this.$breadcrumb.get(1).params
    let menus = [];
    let projectsManage = this.$store.state.user.menu.find(menu => menu.code == 'projects-manage');
    if(projectsManage && projectsManage['children']){
      let projectsDetail = projectsManage.children.find(menu => menu.code == 'projects-detail');
      if(projectsDetail && projectsDetail['children']){
        projectsDetail.children.forEach(
          item => {
            menus.push({
              name: item.name,
              code: item.code,
              router: item.path,
              children: item.children,
              icon: item.source,
              color: this.getColor()
            })
          }
        )
      }
    }
    this.menus = menus;
  },
  mounted(){
    this.onLoad1();
    this.initChartOption();
  },
  methods: {
    initChartOption(){

      let handle = (legends, unit , option) => {
        let count = 0 , data = {
          legend: [],
          data: [],
          legendDatas: {}
        };
        if(!option){
          option = {};
        }
        let valueName = option.valueName || 'value';
        let labelName = option.labelName || 'name';
        let tempData = option.data || createTestData(legends);
        tempData.forEach(
          item => {
            count += item[valueName];
            data.legend.push(item[labelName]);
            data.legendDatas[item[labelName]] = {
              pre: '',
              value: getDataCollectCountStr(item[valueName] , unit),
              c: item[valueName]
            }
            data.data.push({
              ...item,
              name: item[labelName],
              value: item[valueName]
            })
          }
        )
        data.legendDatas = getPre(count , data.legendDatas);
        
        return data;
      };

      this.pieOption1 = pieOption(handle(['半结构化' , '非结构化' , '结构化']));

      getStatisticsCatalogShareTypeRatio().then(res => {
        this.pieOption2 = pieOption(handle(null, '个' , {
          data: res.data.data,
          valueName: 'count',
          labelName: 'name'
        }));
        console.log(this.pieOption2);
      })


      let data1 = handle(['数据采集 上线' , '数据采集 下线'] , '个');
      let data2 = handle(['元数据采集 上线' , '元数据采集 下线'] , '个');
      let data3 = handle(['数据质量 上线' , '数据质量 下线'] , '个');

      let pie = {
        type: 'pie',
        center: ['75%' , '50%'],
        label: {
          show: false
        },
        labelLine: {
          show: false
        }
      };
      let data4 = {
        legend: [].concat(data1.legend).concat(data2.legend).concat(data3.legend),
        legendDatas: {
          ...data1.legendDatas,
          ...data2.legendDatas,
          ...data3.legendDatas
        },
        series: [
          {
            ...pie,
            radius: ['0%' , '20%'],
            data: data1.data
          },
          {
            ...pie,
            radius: ['25%' , '40%'],
            data: data2.data
          },
          {
            ...pie,
            radius: ['45%' , '60%'],
            data: data3.data
          }
        ]
      }

      this.pieOption3 = pieOption(data4 , function(name) {
        return `${name}  {value|${data4.legendDatas[name]['value']}}`;
      } , {
        color: ['#39a0ff' , 'rgba(57 , 160 , 255 , .5)' , '#36cbcb' , 'rgba(54 , 203 , 203 , .5)' , '#fcd77c' , 'rgba(252 , 215 , 124 , .5)']
      });

    },
    onLoad1(){
      this.table1Data = createData(this.table1Option.column);
    },
    menuItemClick(menuItem){
      this.getFirstMenu(menuItem['children']);
      if(this.firstAvailMenu){
        this.$breadcrumb.add({
          name: menuItem.name,
          path: '',
          meta: menuItem
        })
        .add({
          name: this.firstAvailMenu.name,
          path: this.firstAvailMenu.path,
          meta: this.firstAvailMenu,
          type: 'sidebar-menu-children'
        });
        this.$store.commit('SET_SIDEBAR_MENU_TYPE','sidebar-menu-children');
        this.$store.commit('SET_SIDEBAR_MENU',menuItem);
        this.indexMain.showMenus = true;
        this.$router.push(this.firstAvailMenu.path);
      }else if(menuItem.router){
        if(menuItem.children){
          this.indexMain.showMenus = true;
          this.$store.commit('SET_SIDEBAR_MENU',menuItem);
          this.$store.commit('SET_SIDEBAR_MENU_TYPE','sidebar-menu-children');
        }
        this.$router.push(menuItem.router);
      }
    },
    getFirstMenu(arr){
      let _t = this;
      for(let i = 0,len = arr.length; i < len; i ++ ) {
        let item = arr[i];
        if(item.children && item.children.length > 0){
          let flag = this.getFirstMenu(item.children);
          if(!flag){
            break;
          }
        } else {
          if(item['path']){
            _t.firstAvailMenu = item;
            return false;
          }
        }
      }
    },
    getColor(){
      return `rgb(${10 + Math.round(Math.random() * 245)} , ${30 + Math.round(Math.random() * 225)} , ${20 + Math.round(Math.random() * 235)})`
    },
    handleClick(tab, event){
      if(this.activeName !== this.prevName){
        this.menus.forEach(
          item => {
            if(item.code === this.activeName){
              this.prevName = this.activeName;
              this.$router.push(item.router);
            }
          }
        )
      }
    },
    consoleLog(s){
      console.log(s);
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss">

@import '@/styles/vars.scss';

.project-detail-home{
  .menu-item-card{
    &:hover{
      background: #EBEEF5;
    }
  }
}
  .toolbar-color-sp,.state-tasks-color-sp {
    >a {
      display: inline-block;
      margin-right: 10px;
      cursor:default;
      &:hover {
        span {
          color: #333;
        }
      }
      >i {
        border-radius: 10px;
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
      }
      span {
        vertical-align: middle;
        font-size: 12px;
      }
    }
  }
  .toolbar-color-sp {
    >a {
      >i {
        font-size: 15px;
      }
    }
  }
</style>
